<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:c="http://java.sun.com/jsp/jstl/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui">



    <h:head>
        <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
        <title>Viewer</title>
        <h:outputStylesheet library="css" name="style.css" />
        <h:outputStylesheet library="styles" name="shCore.css"/>
        <h:outputStylesheet library="styles" name="shThemeDefault.css"/>
        <h:outputScript library="scripts" name="shCore.js"/>
        <h:outputScript library="scripts" name="shBrushJava.js"/>
        <h:outputScript library="scripts" name="shBrushJavaFX.js"/>
        <script type="text/javascript">SyntaxHighlighter.all();</script>

    </h:head>

    <h:body>
        <h:form id="form" >
            <div id="container" >

                <div id="header">
                    <h1><h:outputText value="Viewer"/></h1>
                </div> 
                <div id="line" />
                <div id="content">
                    <ui:insert name ="content" />
                    <p:breadCrumb>
                        <p:menuitem value="Home" update="@form" url=""/>
                        <p:menuitem value="Add Source" update="@form" url="/pages/editor.xhtml" />
                        <p:menuitem value="History" update="@form" url="/pages/journal.xhtml" />
                        <p:menuitem value="Logout" update="@form" action="#{userSession.logout()}" />
                    </p:breadCrumb>
                    <p:fieldset styleClass="fieldset" legend="Code viewer" style="min-height: 400px; width: 95%">
                        <div id="code" style="float: left; width: 45%; margin: 20px; padding-top: 10px;">
                            <h3>Source code</h3>
                            <p:scrollPanel mode="native" style="height: 480px; font-size: 14px;">
                                <p:tab title="#{viewerBean.name}">
                                    <pre class="brush:java">
                                        <h:outputText value="#{viewerBean.sourceCode}"/> 
                                    </pre>
                                </p:tab>
                            </p:scrollPanel>
                        </div>
                        <div id="carousel" style="float: right; width: 45%; margin: 20px; padding-top: 70px">
                            <p:carousel id="imageGallery" value="#{viewerBean.recordList}" var="record"
                                        headerText="Flowchart" style="width: 100%;"
                                        effect="easeInStrong" vertical="true"
                                        numVisible="1">
                                <p:commandLink action="#{viewerBean.setImageId(record.image.id)}" update="dialog" oncomplete="PF('dlg').show()" >
                                    <p:graphicImage value="#{imageService.image}" height="440" width="100%">
                                        <f:param name="id" value="#{record.image.id}" />
                                    </p:graphicImage>
                                </p:commandLink>

                                <p:dialog id="dialog" header="#{record.image.name}" widgetVar="dlg" modal="true" resizable="false" >
                                    <p:scrollPanel id="scroll" style="overflow: scroll; max-height: 500px; max-width: 1000px;">
                                        <p:graphicImage value="#{imageService.image}" >
                                            <f:param name="id" value="#{viewerBean.imageId}" />
                                        </p:graphicImage>
                                    </p:scrollPanel>
                                </p:dialog>
                            </p:carousel>
                        </div>
                    </p:fieldset>
                </div>
                <div id="footer">
                    <ui:insert name ="footer" />
                </div>       
            </div> 
        </h:form>
    </h:body>

</html>
